import React, { useEffect, useState } from 'react'
import { Card, Form, Button, Input, Select, Table, Row, Col } from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons"
import {getHospitalListRequest} from '@api/hospital/hospitalList'
import type {getHosListSearchParamsType,hospitalListContentType, hospitalListItemsType} from '@api/hospital/model/hospitalListTypes'


export default function HospitalList() {
   //控制表格的是否加载中的状态
  const [isLoading, setIsLoading] = useState(false)
  // 控制当前页码的状态
  const [page,setPage]=useState(1);
  // 控制每页显示的条数
  const [limit,setLimit]=useState(3);
  //控制医院总数量
  const [total,setTotal]=useState(0)
  // 控制查询时用户输入的表单参数
  const [searchParams,setSearchParams]=useState<getHosListSearchParamsType>({});
  // 控制表格的参数
  const [hospitalList,setHospitalList] =useState<hospitalListContentType>([])
  //刚加载组件的时候,发送医院列表的请求
  useEffect(()=>{
    setIsLoading(true)
    const getHospitalList=async()=>{
     const result= await getHospitalListRequest(page,limit,searchParams)
     //把结果中的医院列表的数组设置给状态state
     setHospitalList(result.content)
     //把结果中的医院总数设置给状态state
     setTotal(result.totalElements)
     setIsLoading(false)

    }
   
     
    getHospitalList()
  },[page,limit,searchParams])
 
 
  const tableData: any[] = [];
  const columns = [
    {
      title: '序号',
      width: 60,
      dataIndex: 'index',
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    {
      title: '医院logo',
      //如果没有dataIndex设置,则render中拿到的数据就是当前完整的数据
      /* render(_: any, data: any) {
        return (
          <img width={100} src={`data:image/jpeg;base64,${data.logoData}`} alt="" />
        )
      } */

      //如果设置了dataIndex,则render拿到的dataIndex对应的数据
      dataIndex: 'logoData',
      render(logoData:string){
        return(
          <img width={100} src={`data:image/jpeg;base64,${logoData}`} alt="" />
        )
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '等级',
      render(_: any, data: hospitalListItemsType) {
        return data.param.hostypeString
      }
    },
    {
      title: '详细地址',
      render(_: any, data: hospitalListItemsType) {
        return data.param.fullAddress
      }
    },
    {
      title: '状态',
     render(_:any,data:hospitalListItemsType){
      return data.status===0?'下线':'上线'
     }
    },
    {
      title: '创建时间',
     dataIndex:'createTime',
    },
    {
      title: '操作',
      width: 120,
      fixed: "right" as "right",
      dataIndex: "do",
      render(_: any,) {
        return (
          <div>

            <Button type='primary'>查看</Button>
            <Button type='primary'>排班</Button>
            <Button type='primary'>上线</Button>


          </div >
        )
      }
    }
  ];
  return (
    <div>
      <Card>
        <Form
          name="basic"
        >
          <Row gutter={10}>
         <Col span={4}>
         <Form.Item
            name="hosname"
          
          >
            <Select
              placeholder="请输入省份"
              allowClear
            >
              <Select.Option value="male">河南</Select.Option>
              <Select.Option value="female">湖北</Select.Option>
              <Select.Option value="other">广东</Select.Option>
            </Select>
          </Form.Item>
         </Col>
         <Col span={4}>
         <Form.Item
            name="hosname"
           
          >
            <Select
              placeholder="请输入市"
              allowClear
            >
              <Select.Option value="male">郑州</Select.Option>
              <Select.Option value="female">武汉</Select.Option>
              <Select.Option value="other">深圳</Select.Option>
            </Select>
          </Form.Item>
         </Col>
         <Col span={4}>
         <Form.Item
            name="hosname"
           
          >
            <Select
              placeholder="请输入县/区"
              allowClear
            >
              <Select.Option value="male">高新区</Select.Option>
              <Select.Option value="female">洪山区</Select.Option>
              <Select.Option value="other">宝安区</Select.Option>
            </Select>
          </Form.Item>
         </Col>
         <Col span={4}>
         <Form.Item
            name="hosname"
           
          >
            <Input placeholder="医院名称" />
          </Form.Item>
         </Col>

          <Col span={4}>
          <Form.Item
            name="hoscode"
          
          >
            <Input placeholder='医院编号' />
          </Form.Item>
          </Col>
         <Col span={4}>
         <Form.Item
            name="hoscode"
           
          >
            <Select
              placeholder="医院类型"
              allowClear
            >
              <Select.Option value="male">三级甲等</Select.Option>
              <Select.Option value="female">三级乙等</Select.Option>
              <Select.Option value="other">二级甲等</Select.Option>
            </Select>
          </Form.Item>
         </Col>
          </Row>
         <Row gutter={10}>
         <Col span={4}>
         <Form.Item
            name="hoscode"
           
          >
            <Select
              placeholder="医院状态"
              allowClear
            >
              <Select.Option value="male">上线</Select.Option>
              <Select.Option value="female">下线</Select.Option>
            </Select>
          </Form.Item>
         </Col>

        <Col span={2}>
        <Form.Item >
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />} >
              查询
            </Button>
          </Form.Item>
        </Col>
        <Col span={2} style={{ marginLeft: "20px" }}>
        <Form.Item >
            <Button type="default" htmlType="reset" >
              清空
            </Button>
          </Form.Item>
        </Col>
         </Row>
        </Form>



        <Table
           style={{ marginTop: "30px" }}
          columns={columns}
          dataSource={hospitalList}
          scroll={{ x: 1100 }}
          bordered
          //在table中 要求dataSource中有key属性,但是如果真的没有key 则可以使用rowKey属性指定dataSource中的一个属性作为Key
          rowKey="id"
          loading={isLoading}

          pagination={{
            //页码的配置：当前页码
            current: page,
            //总数据的数量
            total: total,
            //每页条数
            pageSize: limit,
            //展示更改每页条数的选项(默认total大于50条的时候开启)
            pageSizeOptions: [3, 8, 15],
            //是否直接开启更新每页条数的选项
            showSizeChanger: true,

            showTotal(total) {
              return `总共有${total}条数据`
            },
          }}
        />
      </Card>
    </div >
  )
}
